<template>
	<view>
		<!-- 上面弹出层 -->
		<view class="top-popup">
			<view @click="toShu" class="top-btn"><image src="/static/read/800.png" mode=""></image></view>
			<view class="top-img">
				<image src="/static/read/xiazai.png" mode=""></image>
				<image src="/static/read/shoucang.png" mode=""></image>
				<image src="/static/read/fenxiang.png" mode="" @click="share"></image>
			</view>
		</view>
		<!-- 下面弹出层 -->
		<view class="bottom-popup">
			<view class="bottom-popup-shang">
				<view @click="back">上一章</view>
				<image src="/static/read/jiantou.png" mode=""></image>
				<view @click="next">下一章</view>
			</view>
			<view class="bottom-popup-xia">
				<view @click="directory">
					<view class="xia-img" >
						<image src="/static/read/mulu.png" mode=""></image>
					</view>
					<view>目录</view>
				</view>
				<view @click="dayOrDark">
					<view class="xia-img">
						<image v-show="isDark" src="/static/read/dark.png" mode=""></image>
						<image v-show="!isDark" src="/static/read/day.png" mode=""></image>
					</view>
					<view v-show="isDark">夜间</view>
					<view v-show="!isDark">白天</view>
				</view>
				<view @click="setting">
					<view class="xia-img">
						<image src="/static/read/shezhi.png" mode=""></image>
					</view>
					<view>设置</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
	list : {
		type: Object,
		require: true,
		default: () =>{}
	}
})

const isDark = ref<boolean>(false)
const emits = defineEmits(['directory','setting','day'])
const toShu =  () =>{

}

const back = () =>{

}

const next =  () =>{

}

const  dayOrDark = () =>{
	isDark.value = !isDark.value
	if(!isDark.value){
		emits('day','#cff9ba','#000000')
//   白天

	}else {
		// 夜间
		emits('day','#000000','#fff')
	}


}

const directory = () =>{
	emits('directory')

}

const setting = () =>{
	emits('setting')

}
const share = () =>{

}

</script>

<style scoped lang="scss">
.top-popup{
	display: flex;
	justify-content: space-between;
	padding: 50rpx 37rpx 26rpx;
	height:80rpx;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	background-color: #fff;
	view{
		font-size: 45rpx;
	}
	.top-btn{
		image{
			width: 40rpx;
			height: 30rpx;
		}
		
	}
	.top-img{
		image{
			width: 45rpx;
			height: 33rpx;
			margin: 0 15rpx;
		}
	}
}
.bottom-popup{
	height:242rpx;
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: #fff;
	view{
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #090909;
		text-align: center;
	}
	.bottom-popup-shang{
		display: flex;
		justify-content: space-around;
		height: 120rpx;
		align-items: center;
		image{
			width: 417rpx;
			height: 44rpx;
		}
	}
	.bottom-popup-xia{
		display: flex;
		justify-content: space-around;
		.xia-img{
			image{
				width: 32rpx;
				height: 34rpx;
			}
		}
	}
}
</style>
